<template>
    <a-modal
        :title="modal.title"
        :width="width"
        :visible="visible"
        :mask="mask"
        :maskClosable="false"
        :destroyOnClose="true"
        :footer="null"
        :bodyStyle="bodyStyle"
        :dialogClass="dialogClass"
        @cancel="
            () => {
                $emit('cancel')
            }
        "
    >
        <a-spin :spinning="modalLoading">
            <slot></slot>
            <div>
                <a-button type="primary" class="fr" @click="$emit('ok')" :loading="confirmLoading">确定</a-button>
            </div>
        </a-spin>
    </a-modal>
</template>

<script>
export default {
    name: 'create-modal',
    props: {
        modal: Object,
    },
    data() {
        return {}
    },
    created() {},
    computed: {
        visible() {
            return this.modal.visible
        },
        width() {
            return this.modal.width || '60%'
        },
        mask() {
            return this.modal.mask !== undefined ? this.modal.mask : true
        },
        footer() {
            return this.modal.footer
        },
        bodyStyle() {
            return this.modal.bodyStyle
        },
        confirmLoading() {
            return this.modal.loading || false
        },
        modalLoading() {
            return this.modal.modalLoading || false
        },
        dialogClass() {
            return this.modal.dialogClass || 'custom-modal'
        },
    },
}
</script>

<style scoped></style>
